<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/main.css">

    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">

    <title>Boleto  - Online Ticket Booking Website HTML Template</title>

    <style>
        #seatss{
            float: right;
            color: #ffffff;
            padding: 5px;
            width: 150px;
            background: #162f5f;
            position: relative;
            mask-position: center center;
            -webkit-mask-position: center center;
            text-align: center;
            mask-image: url(../imgs/css/img/movie-seat.png);
            -webkit-mask-image: url(../imgs/css/img/movie-seat.png);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            cursor: pointer;
            -webkit-transition: all ease 0.3s;
            transition: all ease 0.3s;
            margin: 5px;
        }
    </style>

</head>


<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->
<!-- ==========Overlay========== -->
<div class="overlay"></div>
<a href="#0" class="scrollToTop">
    <i class="fas fa-angle-up"></i>
</a>

<%@ include file="nav/nav.jsp"%>

<section class="window-warning inActive">
    <div class="lay"></div>
    <div class="warning-item">
        <h6 class="subtitle">欢迎! </h6>
        <h4 class="title">选择你的座位</h4>
        <div class="thumb">
            <img src="../imgs/images/movie/seat-plan.png" alt="movie">
        </div>
        <button type="button" class="custom-button seatPlanButton" id="seat-plan">座位计划<i class="fas fa-angle-right"></i></button>
    </div>
</section>
<!-- ==========Window-Warning-Section========== -->

<!-- ==========Banner-Section========== -->
<section class="details-banner hero-area bg_img" data-background="../imgs/images/banner/banner03.jpg">
    <div class="container">
        <div class="details-banner-wrapper">
            <div class="details-banner-content">
                <h3 class="title">${movies.name}</h3>
                <div class="tags">
                    <a href="#0">${movies.nameFg}</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==========Banner-Section========== -->

<!-- ==========Book-Section========== -->
<section class="book-section bg-one">
    <div class="container">
        <form class="ticket-search-form two">
            <div class="form-group">
                <div class="thumb">
                    <img src="../imgs/images/ticket/city.png" alt="ticket">
                </div>
                <span class="type">城市</span>
                <select class="select-bar">
                    <option value="london">London</option>
                    <option value="dhaka">dhaka</option>
                    <option value="rosario">rosario</option>
                    <option value="madrid">madrid</option>
                    <option value="koltaka">kolkata</option>
                    <option value="rome">rome</option>
                    <option value="khoksa">khoksa</option>
                </select>
            </div>
            <div class="form-group">
                <div class="thumb">
                    <img src="../imgs/images/ticket/date.png" alt="ticket">
                </div>
                <span class="type">日期</span>
                <select class="select-bar">
                    <option value="26-12-19">23/10/2020</option>
                    <option value="26-12-19">24/10/2020</option>
                    <option value="26-12-19">25/10/2020</option>
                    <option value="26-12-19">26/10/2020</option>
                </select>
            </div>
            <div class="form-group">
                <div class="thumb">
                    <img src="../imgs/images/ticket/cinema.png" alt="ticket">
                </div>
                <span class="type">影院</span>
                <select class="select-bar">
                    <option value="Awaken">Awaken</option>
                    <option value="Venus">Venus</option>
                    <option value="wanted">wanted</option>
                    <option value="joker">joker</option>
                    <option value="fid">fid</option>
                    <option value="kidio">kidio</option>
                    <option value="mottus">mottus</option>
                </select>
            </div>
            <div class="form-group">
                <div class="thumb">
                    <img src="../imgs/images/ticket/exp.png" alt="ticket">
                </div>
                <span class="type">经验</span>
                <select class="select-bar">
                    <option value="English-2D">English-2D</option>
                    <option value="English-3D">English-3D</option>
                    <option value="Hindi-2D">Hindi-2D</option>
                    <option value="Hindi-3D">Hindi-3D</option>
                    <option value="Telegu-2D">Telegu-2D</option>
                    <option value="Telegu-3D">Telegu-3D</option>
                </select>
            </div>
        </form>
    </div>
</section>
<!-- ==========Book-Section========== -->

<!-- ==========Movie-Section========== -->
<div class="ticket-plan-section padding-bottom padding-top">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 mb-5 mb-lg-0">
                <ul class="seat-plan-wrapper bg-five">
                    <c:forEach items="${cinames}" var="c" begin="0" end="5">
                    <li>
                        <div class="movie-name">
                            <div class="icons">
                                <i class="far fa-heart"></i>
                                <i class="fas fa-heart"></i>
                            </div>

                            <a href="#0" class="name">${c.name}</a>
                            <div class="location-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                        </div>


                        <div class="movie-schedule">
                            <div class="item" id="seats" style="width: 150px" value="${c.id}">
                                <button id="seatss" type="hidden button" onclick="seatcheck(${c.id},${movies.id})">
                                    点击按钮选座</button>
                            </div>
                        </div>
                    </li>
                    </c:forEach>

                </ul>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-10">
                <div class="widget-1 widget-banner">
                    <div class="widget-1-body">
                        <a href="#0">
                            <img src="../imgs/images/sidebar/banner/banner03.jpg" alt="banner">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ==========Movie-Section========== -->

<%@ include file="footer/footer.jsp"%>


<script src="../imgs/js/jquery-3.3.1.min.js"></script>
<script src="../imgs/js/modernizr-3.6.0.min.js"></script>
<script src="../imgs/js/plugins.js"></script>
<script src="../imgs/js/bootstrap.min.js"></script>
<script src="../imgs/js/isotope.pkgd.min.js"></script>
<script src="../imgs/js/magnific-popup.min.js"></script>
<script src="../imgs/js/owl.carousel.min.js"></script>
<script src="../imgs/js/wow.min.js"></script>
<script src="../imgs/js/countdown.min.js"></script>
<script src="../imgs/js/odometer.min.js"></script>
<script src="../imgs/js/viewport.jquery.js"></script>
<script src="../imgs/js/nice-select.js"></script>
<script src="../imgs/js/main.js"></script>

<script>
    let cinameIds;
    let movieIds;
    function seatcheck(cinameId,movieId) {
           console.log(cinameId);
           console.log(movieId);
           cinameIds=cinameId;
           movieIds=movieId;
    }
    console.log(cinameIds+"=="+movieIds);
    $("#seat-plan").click(function () {
        // window.location = "/boot/seat/plan?session=10:45&cinameId="+cinameIds+"&movieIds="+movieIds+"&hall=1";
        window.location = "/boot/seat/plan?cinameId="+cinameIds+"&movieId="+movieIds;
    })

    // function seats(obj,cinameId){
    //     let cinameid = document.getElementById("seats").value;
    //     window.location = "/boot/seat/plans?cinameId="+cinameId+"&movieId"+obj;
    //     alert("cinameId="+cinameid+"mid="+obj)
    // }
    // function seat(obj) {
    //     alert("cinameId="+obj);
    // }
</script>


</body>

</html>
